<template>
    <el-dialog :model-value="dialogFormVisible" :destroy-on-close="true" title="卡状态操作审核" width="600px"
        @close="emits('closeDialog')">
        <el-form ref="dialogFormRef" :model="dialogForm" :label-width="formLabelWidth" :rules="rules">
            <el-form-item label="卡号">
                {{ dialogForm.card_number }}
            </el-form-item>
            <el-form-item label="申请操作类型">
                {{ dialogForm.operate_type }}
            </el-form-item>
            <el-form-item label="审核结果" :label-width="formLabelWidth" prop="status">
                <el-radio-group v-model="dialogForm.status">
                    <el-radio key="1" label="1">通过</el-radio>
                    <el-radio key="2" label="2">拒绝</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="注销卡时需要退回的金额" prop="return_amount">
                <el-input v-model="dialogForm.return_amount" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="emits('cancel')">取消</el-button>
                <el-button type="primary" @click="submit(dialogForm)" :loading="btnLoading">
                    提交
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script setup>
import { ref } from "vue";
const dialogFormRef = ref(null);

defineProps({
    dialogFormVisible: {
        type: Boolean,
        default: false,
    },
    dialogForm: {
        type: Object,
        default: {
            id: "",
            status: "",
            return_amount: "",
        },
    },
    btnLoading: {
        type: Boolean,
        default: false,
    },
});
const emits = defineEmits(["closeDialog", "cancel", "submitForm"]);

const formLabelWidth = "200px";
// 校验
const rules = {
    status: [{ required: true, message: "请选择审核结果", trigger: "blur" }],
};
// 提交
const submit = (dialogForm) => {
    dialogFormRef.value
        .validate()
        .then(async () => {
            if (dialogForm.operate_type == 'CLOSED' && dialogForm.status == 1 && !dialogForm.return_amount) {
                ElMessage({
                    message: "卡片注销时需要填写退回的金额",
                    type: "error",
                });
                return false;
            }
            try {
                const param = Object.assign({}, {
                    id: dialogForm.id,
                    status: dialogForm.status,
                    return_amount: dialogForm.return_amount
                });
                emits("submitForm", param);
            } catch (error) {
                return false;
            }
        })
        .catch((error) => {
            return false;
        });
};
</script>
  